import React, { useState } from 'react';
import Taro from '@tarojs/taro';
import Skeleton from 'taro-skeleton'
import {View, Navigator, Image, Text, Block} from "@tarojs/components";
import CouponBox from "../../components/coupon-box";
import CountDown from "../../../components/count-down/count-down-seckill";
import {platform} from "../../../utils/platform-settting.service";
import Float from "../../../components/float/float";
import {TARO_ENV} from "../../../constants/api";
import './seckill-name.scss';

const bgImg1 = "https://resource.ivcheng.com/upload/images/20221110/1668070877142_123.png";
const bgImg2 = "https://resource.ivcheng.com/upload/images/20221110/1668070899669_830.png";

interface SeckillNameType {
  market_price?: any
  name?: string
  loading?: boolean
  subTitle?: string
  time?: any
  goodStatus?: any
  price?: any
  startDate?: string
  endDate?: string
  ticketWayStr?: number
  effective_begin_show?: any
  effective_end_show?: any
  seckill_stock?: any
  seckillStatus?: boolean
  inOneMinute?: any
}


const SeckillName: React.FC<SeckillNameType> = ({
                                                  loading,
                                                  price,
                                                  market_price,
                                                  goodStatus,
                                                  time,
                                                  name,
                                                  subTitle,
                                                  startDate,
                                                  endDate,
                                                  effective_begin_show,
                                                  effective_end_show,
                                                  ticketWayStr,
                                                  seckill_stock,
                                                  seckillStatus,
                                                  inOneMinute
                                                }) => {
  const dataColor = Taro.getStorageSync('colorData');
  const [show, setShow] = useState(false);
  const shareWow = () => {
    setShow(!show)
  }
  const handleInDjs = (flag) => {
    inOneMinute(false)
  };

  return (
    <Skeleton title row={2} action loading={loading} rowHeight='40px'>
      <View className="seckill-price-box">
        <View className='countDown-box-wrapper'>
          <View className="countDown-box">
            <View className="price">
              <Text className="symbol font-family-price">¥</Text>
              <View className='view-inline number font-family-price'>
                <Float value={price} />
                <Text className='members-enjoy'>秒杀价</Text>
              </View>

              <Text
                className="window_number font-family-price"
              >￥{market_price}</Text>
            </View>


            <View className='count-down-box'>
              <View className='count-down-wrap'>
                <View className='time-tips'>{goodStatus === "即将开始" ? "距开始还有" : "距结束还有"}</View>
                <CountDown time={time || 0} isBGColor={true} whiteSemicolon={true} inDjs={handleInDjs} />
              </View>
            </View>
          </View>
        </View>

      </View>

      <View className="seckill-name-box">
        <View className='title-box-only'>
          <Block>
            <View className='title'><Text selectable>{name}</Text></View>
            {
              !!subTitle &&
              <View className="m-b-big subTitle"><Text selectable>{subTitle}</Text></View>
            }
          </Block>
          {/*!goodsLightspot && labels && labels.length > 0 &&
              <View className="seckill-sale-poi">
                <View className='labels nogoodsLightspot'>
                {labels.map((item, index) => <Navigator className='label'
                  style={`border: 1Px solid ${dataColor.titleColor};color: ${dataColor.titleColor}`}
                  key={index}
                  url={item.url}
                ><Text>{item.name}</Text></Navigator>)}
                <View className="poi-info">产品卖点*</View>
              </View>
            </View>
          */}
          <View className='no'>开始时间：{startDate}</View>
          <View className='no'>结束时间：{endDate}</View>
          {
            effective_begin_show && effective_end_show &&
            <View className='no'>可用日期：{effective_begin_show}{effective_end_show ? ` ${effective_end_show}` : ''}</View>
          }
          {ticketWayStr && <View className='no'>取票方式：{ticketWayStr}</View>}

          {/*<View className='stock-share-sales'>
            <View className='stock-share-sales-items'>库存：{seckill_stock}</View>
            <View className='stock-share-sales-items'>销量：{salesVolume}笔</View>
            <View className='stock-share-sales-items'>{shareVolume}人分享</View>
          </View>*/}
        </View>
      </View>
    </Skeleton>
  )
}
SeckillName.defaultProps = {
  market_price: 0,
  name: "",
  loading: false,
  subTitle: "",
  time: "",
  goodStatus: "",
  price: 0,
  startDate: "",
  endDate: "",
  ticketWayStr: "",
  effective_begin_show: "",
  effective_end_show: "",
  seckill_stock: 0,
  seckillStatus: false,
  inOneMinute: null
}

export default SeckillName
